<template>
	<view class="goods-nav-container">
		<view class="goods-nav-left">
			<view class="nav-tab-item" 
			v-for="(item, index) in options" 
			@click="onClick(item, index)" :key="index">
				<view class="tab-icon">
					<uni-icons 
					:type="item.icon" 
					:size="item.icon === 'cart' ? 23 : 20"
					>
					</uni-icons>
				</view>
				<text class="tab-text" :style="{ marginTop: item.text === '购物车' ? '-2rpx' : '4rpx' }" >{{ item.text }}</text>
				
				<view class="flex uni-tab__dot-box">
					<text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot" :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000',
					color:item.infoColor?item.infoColor:'#fff'
					}"> {{ item.info > 99 ? '99+' : item.info }}</text>
				</view>
				
			</view>
		</view>
		<view class="goods-nav-right">
			<view class="goods-nav-btn btn-submit" 
			@click="buttonClick(item, index)"
			v-for="(item, index) in settings"
			:key="index"
			:style="{ 
				backgroundColor: item.backgroundColor, 
				color: item.color, 
				width: `${item.width}rpx`,
				borderRadius: `${item.borderRadius}rpx`
				}"
			>
				{{ item.text }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-goods-nav",
		props: {
			options: {
				type: Array,
				default() {
					return [
						{
							icon: 'heart',
							text: '想要'
						},
						{
							icon: 'cart',
							text: '购物车',
							info: 0
						},
					]
				}
			},
			settings: {
				type: Array,
				default() {
					return [
						{
							text: '加入购物车',
							width: 240,
							borderRadius: 4, 
							color: '#fff',
							backgroundColor: '#52e3fc'
						},
						{
							text: '立即购买',
							width: 240,
							borderRadius: 4,
							color: '#fff',
							backgroundColor: '#52e3fc'
						},
					]
				}
			},
			border: {
				type: Boolean,
				default: false
			},
			circle: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			onClick(item, index) {
				this.$emit('click', {
					index,
					content: item,
				})
			},
			buttonClick(item, index) {
				this.$emit('buttonClick', {
					index,
					content: item,
				})
			}
		}
	}
</script>

<style lang="scss">
.flex {
	display: flex;
}
.goods-nav-container {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	height: 120rpx;
	padding: 20rpx;
	border-top: 1px solid #f5f5f5;
	background-color: #fff;
	box-sizing: border-box;
	justify-content: space-between;
}
.goods-nav-right,
.goods-nav-left {
	display: flex;
}
.nav-tab-item {
	display: flex;
	font-size: 12px;
	position: relative;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 0 10px;
	font-weight: bold;
	.tab-text {
		margin-top: 4rpx;
	}
}
.goods-nav-btn {
	// width: 240rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	// color: #fff;
	// background-color: #52e3fc;
	&:not(:last-child) {
		margin-right: 20rpx;
	}
	&.border {
		border: 1px solid #d9d9d9;
	}
	&.circle {
		border-radius: 80rpx !important;
	}
}

.uni-tab__dot-box {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: column;
	/* #endif */
	position: absolute;
	right: -4px;
	top: -4px;
	justify-content: center;
	align-items: center;
	// width: 0;
	// height: 0;
}
.uni-tab__dot {
	// width: 30rpx;
	// height: 30rpx;
	padding: 0 4px;
	line-height: 15px;
	color: #ffffff;
	text-align: center;
	font-size: 12px;
	background-color: #ff0000;
	border-radius: 15px;
}
.uni-tab__dots {
	padding: 0 4px;
	// width: auto;
	border-radius: 15px;
}
</style>